<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jqgrid demo</title>
		<link href="plugin/jqueryui/1.10.4/jquery-ui.min.css" media="screen" rel="stylesheet">
		<link href="plugin/jqgrid/4.6/css/ui.jqgrid.css" media="screen" rel="stylesheet">
		
	</head> 
	<body>
	<div id="msg"></div>
	<div id="body">
		<div id="main">
			<div style="text-align:center">
				客户id:<input type="text" name="myId" id="myId">&nbsp;&nbsp;&nbsp;&nbsp;
				客户姓名:<input type="text" name="myName" id="myName">&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="button" value="查询" id="search">
			</div>
			<table id="jtable"></table>
			<div id="jpager"></div>
			<div>您选择了<lable id="count" style="color:red;">0</lable>个客户。</div>
		</div>
	</div>
	<script src="plugin/jquery/1.9.1/jquery.js" type="text/javascript" ></script>
	
	<script src="plugin/jqgrid/4.6/js/i18n/grid.locale-cn.js" type="text/javascript" ></script>
	<script src="plugin/jqgrid/4.6/js/jquery.jqGrid.min.js" type="text/javascript" ></script>
	
	<script type="text/javascript">
		$(function(){
			var mydata = [
			{id:"1",invdate:"2007-10-01",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"2",invdate:"2007-10-02",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"3",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"4",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"5",invdate:"2007-10-05",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"6",invdate:"2007-09-06",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"7",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"8",invdate:"2007-10-03",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"9",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"11",invdate:"2007-10-01",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"12",invdate:"2007-10-02",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"13",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"14",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"15",invdate:"2007-10-05",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"16",invdate:"2007-09-06",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"17",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"18",invdate:"2007-10-03",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"19",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"21",invdate:"2007-10-01",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"22",invdate:"2007-10-02",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"23",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"24",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"25",invdate:"2007-10-05",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"26",invdate:"2007-09-06",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"27",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"28",invdate:"2007-10-03",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"29",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
			];
			$("#jtable").jqGrid({
				//url:"${root }/jqgrid/list",  //请求的url
	            mtype: "POST",   
				data: mydata, 
	            datatype: "local", //数据类型"local","xml","json",  
	            colNames:['唯一号','姓名','性别','年龄', '出生日期', '银行存款', '税收', '总存款'],   
	            colModel:[   
	  	            {name:'id',index:'id', width:75,frozen:true},   
	                {name:'name',index:'name', width:75,frozen:true},  
	                {name:'sex',index:'sex', width:90,formatter:'select', editoptions:{value:"0:女;1:男"}},   
	                {name:'age',index:'age', width:40},   
	                {name:'invdate',index:'invdate', width:100, formatter:'date',  formatoptions: {srcformat:"Y-m-d H:i:s", newformat :"Y年m月d日"}},   
	                {name:'amount',index:'amount', width:180, formatter:'number',  formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3} ,align:"right"},
	                {name:'tax',index:'tax', width:180, formatter:'number',  formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3} ,align:"right"},
	                {name:'total',index:'total', width:180, formatter:'number',  formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3} ,align:"right"}
	            ],  
				rowNum:10,
				rowList:[10,20,30],
				shrinkToFit: false,
	            caption: "客户信息",
	            pager: "#jpager", //分页栏显示在id为pager1的div里面  
	            multiselect: true, //复选框  
	            width: 800, //Grid 宽度  
	            height: 200 //行高 height: "100%",  
	            
			}).jqGrid('setGroupHeaders', {
				  useColSpanStyle: true, //若为true将没有拆分的title合并
				  groupHeaders:[
					{startColumnName: 'amount', numberOfColumns: 3, titleText: '银行存款'}
				  ]	
			}).jqGrid('setFrozenColumns');  //除了frozen:true，还要调用此函数才能使冻结有效
			
			jQuery("#jtable").jqGrid('navGrid','#jpager',{edit:true,add:true,del:true});
		}) ;
		
	</script>
	
	</body>
</html>
